<template>
	<view>
		<uni-section :title="'选择时间：' + '[' + datetimerange + ']' " type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
		</view>
		<view class="c1" v-for="item in maintenanceList">
			<view @click="xiangqing(item)">
				<view class="c2" v-show="item.state=='生效中' ">
					<text
						class="s2">{{item.communityName+item.howMany+'栋'+item.cellNumber+'单元'+item.howFloor}}</text><text
						class="c3">{{item.state}}</text>
				</view>
				<view class="c2" v-show="item.state=='已失效' ">
					<text
						class="s2">{{item.communityName+item.howMany+'栋'+item.cellNumber+'单元'+item.howFloor}}</text><text
						class="c5">{{item.state}}</text>
				</view>
				<view class="s1">
					<u-line></u-line>
				</view>
				<view class="c2">
					访客姓名：<text class="c4">{{item.visitorsName}}</text>
				</view>
				<view class="c2">
					手机号码：<text class="c4">{{item.visitorsPhone}}</text>
				</view>
				<view class="c2" v-show="item.visitorsAge=='0'">
					性别：<text class="c4"> 男</text>
				</view>
				<view class="c2" v-show="item.visitorsAge=='1'">
					性别：<text class="c4"> 女</text>
				</view>
				<view class="c2">
					访问日期：<text class="c4">{{item.accessTime | formatDate }}</text>
				</view>
				<view class="c2">
					访问时长：<text class="c4">{{item.duration}} 分钟</text>
				</view>

			</view>
		</view>
		<!-- <button @click="submit" class="button-login" hover-class="button-hover">申请维修</button> -->
	</view>

</template>
<script>
	export default {
		data() {
			return {
				single: '',
				datetimesingle: '',
				range: ['2021-02-1', '2021-3-28'],
				datetimerange: [],
				// start: Date.now() - 1000000000,
				// end: Date.now() + 1000000000,
				maintenanceList: []
			};
		},
		onLoad() {
			this.getMaintenance()
		},
		//时间戳的处理    
		filters: {
			formatDate: function(value) {
				var date = new Date(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		watch: {
			datetimesingle(newval) {
				console.log('单选:', this.datetimesingle);
			},
			range(newval) {
				console.log('范围选:', this.range);
			},
			datetimerange(newval) {
				this.getMaintenance()
				console.log('范围选:', this.datetimerange);
			}
		},
		mounted() {
			setTimeout(() => {
				// this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
				// this.single = '2021-2-12'
				// this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
			}, 3000)
		},

		methods: {
			change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
			},
			changeLog(e) {
				console.log('change事件:', e);
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			getMaintenance() {
				this.$axios({
					url: '/systemuser/visitors-record/getVisitorsList',
					data: {
						id: 1,
						datetime:this.datetimerange
					},
					method: 'GET',
					success: (res) => {
						console.log(res, "111111111111111111111111111111")
						if (res.data.code == 20000) {
							this.maintenanceList = res.data.data.list
						}
					}
				})
			},
			submit() {
				uni.navigateTo({
					url: './information'
				})
			},
			xiangqing(item) {
				uni.navigateTo({
					url: `./weixiuxiangqing?item=${encodeURIComponent(JSON.stringify(item))}`,
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	#lll {
		background-color: #868686;
	}

	.c5 {
		text-align: center;
		margin-top: -50rpx;
		margin-left: 525rpx;
		color: #ff0000;
		background-color: #fff2de;
		width: 130rpx;
		height: 50rpx;
		display: block;
	}

	.c6 {
		text-align: center;
		margin-top: -50rpx;
		margin-left: 525rpx;
		color: #0091d9;
		background-color: #d2f7ff;
		width: 130rpx;
		height: 50rpx;
		display: block;
	}

	.c1 {
		margin-left: 20rpx;
		background: #ffffff;
		width: 710rpx;
		height: 455rpx;
		border: 1rpx solid #b1b1b1;
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-radius: 20rpx;
		box-shadow: 5px 5px 10px 5px #ccc;
	}

	.c2 {
		margin-left: 20rpx;
		padding-top: 20rpx;

	}

	.c3 {
		text-align: center;
		margin-top: -50rpx;
		margin-left: 550rpx;
		color: #00aa00;
		background-color: #c5ffcf;
		width: 100rpx;
		height: 50rpx;
		display: block;
	}

	.c4 {
		font-weight: 700rpx;
	}

	.s1 {
		margin-top: 20rpx;
	}

	.s2 {
		font-size: 35rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}
</style>
